<template>
  <div class="big-box">
    <!-- 机构概览 -->
    <el-row>
      <el-col :span="14">
        <div class="grid-content bg-purple-dark" style="height:234px;display:flex;justify-content: space-between;">
          <div style="display:flex">
            <div>
              <h2>机构概览</h2>
              <h4>{{ organization.organName }}</h4>
              <div>地址：{{ organization.organAddress }}</div>
              <div>负责人：{{ organization.principal }}</div>
              <el-button style="margin-top: 10px;" type="primary" @click="lookPicture">查看营业部分布 </el-button>
            </div>
            <!-- 模态框 -->
            <el-dialog
              :visible.sync="dialogVisible"
              width="50%"
            />
            <div style="display:flex;justify-content: space-around;margin-top: 20px;margin-left: 150px;">
              <div style="margin-right: 20px;">分拣中心(个)
                <h1 style="color:#e15536">{{ organization.sortingCenterNumber }}</h1>
              </div>
              <div style="margin-right: 20px;">营业部(个)
                <h1 style="color:#e15536">{{ organization.agencyNumber }}</h1>
              </div>
              <div style="margin-right: 20px;">司机人数(个)
                <h1 style="color:#e15536">{{ organization.driverNumber }}</h1>
              </div>
              <div style="margin-right: 20px;">快递员人数(个)
                <h1 style="color:#e15536">{{ organization.courierNumber }}</h1>
              </div>
            </div>
          </div>
        </div></el-col>
      <el-col :span="10"><div class="grid-content bg-purple-dark" style="height:234px;margin-left: 30px;">
        <div style="display:flex;justify-content: space-between;"><h3>今日数据</h3><span style="margin-top: 20px;"><i class="el-icon-refresh" />时间：{{ data }}</span></div>
        <div class="el-col el-col-8"><div class="label">订单金额(元)</div> <h1 id="my-number1" class="value">{{ todayData.orderAmount }}</h1> <div class="bottom">
          较昨日 +{{ todayData.orderAmount }}</div></div>
        <div class="el-col el-col-8"><div class="label">订单数量(笔)</div> <h1 id="my-number1" class="value">{{ todayData.orderNumber }}</h1> <div class="bottom">
          较昨日 +{{ todayData.orderNumberChanges }}</div></div>
        <div class="el-col el-col-8"><div class="label">运输任务(次)</div> <h1 id="my-number1" class="value">{{ todayData.transportTaskNumber }}</h1> <div class="bottom">
          较昨日 +{{ todayData.transportTaskNumberChanges }}</div></div>
      </div>
      </el-col>
    </el-row>
    <!-- 水球图表 -->
    <el-row>
      <el-col :span="14">
        <div class="grid-content bg-purple-dark" style="height:300px;">
          <div style="display:flex;justify-content: space-between;">
            <h2>代办任务</h2>
            <span style="margin-top: 20px;"><i class="el-icon-refresh" />{{ data }}
            </span>
          </div>
          <div style="display:flex;">
            <div>
              <div ref="commission1" style="width:240px;height:180px;" />
              <span>待取件：{{ backlog.waitingPickupNumber }}</span>
            </div>
            <div>
              <div ref="commission2" style="width:240px;height:180px;" />
              <span>待派件：{{ backlog.waitingPickupNumber }}</span>
            </div>
            <div>
              <div ref="commission3" style="width:240px;height:180px;" />
              <span>未分配运输：{{ backlog.unassignedTransportTaskNumber }}</span>
            </div>
            <div>
              <div ref="commission4" style="width:240px;height:180px;" />
              <span>超时运输：{{ backlog.timeoutTransportTaskNumber }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10"><div class="grid-content bg-purple-dark" style="height:300px;margin-left: 30px;">
        <div style="display:flex;justify-content: space-between;">
          <h2>执行中任务</h2>
          <span style="margin-top: 20px;"><i class="el-icon-refresh" />{{ data }}
          </span>
        </div>
        <div style="display:flex;">
          <div style="margin-left: 150px;">
            <div ref="commission5" style="width:240px;height:180px;" />
            <span>运输中：{{ todayData.taskInTransitNumber }}</span>
          </div>
          <div>
            <div ref="commission6" style="width:240px;height:180px;" />
            <span>派送中：{{ todayData.taskInDeliveryNumber }}</span>
          </div>
        </div>
      </div>
      </el-col>
    </el-row>
    <!-- 常用功能 -->
    <el-row>
      <el-col>
        <div class="flex">
          <h2 style="margin-top: 0px;">常用功能</h2>
          <div class="list">
            <div class="item">
              <img class="img" src="../../assets/kd.png">
              <el-button type="text" style="color:#202331">快递作业</el-button>
            </div>
            <div class="item">
              <img class="img" src="../../assets/ys.png">
              <el-button type="text" style="color:#202331">运输任务</el-button>
            </div>
            <div class="item">
              <img class="img" src="../../assets/xl.png">
              <el-button type="text" style="color:#202331">线路管理</el-button>
            </div>
            <div class="item">
              <img class="img" src="../../assets/cl.png" alt="">
              <el-button type="text" style="color:#202331">车辆管理</el-button>
            </div>
            <div class="item">
              <img class="img" src="../../assets/sj.png">
              <el-button type="text" style="color:#202331">司机管理</el-button>
            </div>
            <div class="item">
              <img class="img" src="../../assets/yf.png">
              <el-button type="text" style="color:#202331">运费查询</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 线路管理 -->
    <el-row>
      <el-col :span="12">
        <div class="line1">
          <h3>线路管理</h3>
          <div>
            <div ref="map" class="xlCharts" style="width:790px;height:400px;" />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="line2">
          <div style="display:flex;justify-content: space-between;">
            <h3>运输任务</h3>
            <span style="margin-top: 20px;">查看更多></span>
          </div>
          <div style="border: 1px #f4f6f8 solid;height:400px; overflow: hidden;">
            <el-table
              ref="table"
              :header-cell-style="{ background: '#f4f6f8' }"
              :data="transportTaskList"
              style="width: 100%"
            >
              <el-table-column
                prop="id"
                label="任务编码"
                width="180"
              />
              <el-table-column
                prop="startAgency"
                label="起始地"
                width="180"
              />
              <el-table-column
                prop="endAgency"
                label="目的地"
              />
              <el-table-column
                prop="licensePlate"
                label="车辆"
              />
              <el-table-column
                label="任务状态"
              >
                <template v-slot="{row}">
                  <el-button v-if="row.status===1" style="color:#424542" type="text">待执行</el-button>
                  <el-button v-if="row.status===2" style="color:#424542" type="text">进行中</el-button>
                  <el-button v-if="row.status===3" style="color:#424542" type="text">待确认</el-button>
                  <el-button v-if="row.status===4" style="color:#424542" type="text">已完成</el-button>
                  <el-button v-if="row.status===5" style="color:#424542" type="text">已取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 订单总量 -->
    <el-row>
      <el-col :span="12">
        <div class="line1" style="margin-bottom: 40px;">
          <div style="display:flex;justify-content: space-between;">
            <h3>订单总量</h3>
            <span style="margin-top: 20px;">{{ data }}</span>
          </div>
          <div style="margin-left: 200px;display:flex;justify-content: space-around;">
            <div>
              <h1 style="color:#e15536">{{ gross.orderMaxNumber }}</h1>
              <div>订单最高值</div>
            </div>
            <div>
              <h1 style="color:#e15536">{{ gross.orderAverageNumber }}</h1>
              <div>订单平均值</div>
            </div>
            <div>
              <h1 style="color:#e15536">{{ gross.orderMinNumber }}</h1>
              <div>订单最低值</div>
            </div>
          </div>
          <div ref="orderCharts1" style="width:800px;height:360px;" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="line2" style="margin-bottom: 40px;">
          <div style="display:flex;justify-content: space-between;">
            <h3>订单分布</h3>
            <span style="margin-top: 20px;">{{ data }}</span>
          </div>
          <div ref="orderCharts2" style="width:800px;height:360px;" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'// 引入echarts
import 'echarts-liquidfill'
import china from '@/utils/china.json'
import { getWorkbench } from '@/api/workbench'
export default {
  data() {
    return {
      list: [],
      isShow: false,
      transportTaskList: [], // 运输任务
      organization: {}, // 机构概述
      todayData: {}, // 今日数据
      data: new Date().toLocaleString(), // 获取实时时间
      backlog: {}, // 代办任务
      gross: {}, // 订单总量
      dialogVisible: false
    }
  },
  // 监听图表数据
  watch: {
    backlog: {
      deep: true,
      handler() {
        // 代办任务
        this.backlogChart1.setOption(
          {
            title: [
              {
                textStyle: {
                  fontSize: 1,
                  fontWeight: '100',
                  lineHeight: 16,
                  textAlign: 'center'
                }
              }
            ],
            series: [
              {
                type: 'liquidFill',
                radius: '47%',
                center: ['25%', '45%'],
                color: [
                  {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#e35d3e'
                      }
                    ]
                  }
                ],
                data: [this.backlog.waitingPickupRate / 100], // data个数代表波浪数
                backgroundStyle: {
                  color: '#ffe5e0' // 球内部背景颜色
                },
                outline: {
                  borderDistance: 5,
                  itemStyle: {
                    borderWidth: 1,
                    borderColor: '#ff9b41',
                    shadowBlur: 20
                  }
                },
                label: {
                  normal: {
                    textStyle: {
                      fontSize: 15,
                      color: 'black'
                    }
                  }
                }
              }
            ]
          }
        )
        // 第二个
        this.backlogChart2.setOption(
          {
            title: [
              {
                x: '22%',
                y: '70%',
                textStyle: {
                  fontSize: 1,
                  fontWeight: '100',
                  lineHeight: 16,
                  textAlign: 'center'
                }
              }
            ],
            series: [
              {
                type: 'liquidFill',
                radius: '47%',
                center: ['25%', '45%'],
                color: [
                  {
                    type: 'linear',
                    x: 0,
                    y: 0,

                    colorStops: [
                      {
                        offset: 0,
                        color: '#e35d3e'
                      }
                    ]
                  }
                ],
                data: [this.backlog.waitingDispatchRate / 100], // data个数代表波浪数
                backgroundStyle: {
                  color: '#ffe5e0' // 球内部背景颜色
                },
                outline: {
                  borderDistance: 5,
                  itemStyle: {
                    borderWidth: 1,
                    borderColor: '#ff9b41',
                    shadowBlur: 20
                  }
                },
                label: {
                  normal: {
                    textStyle: {
                      fontSize: 15,
                      color: 'black'
                    }
                  }
                }
              }
            ]
          }
        )
        // 第三个
        this.backlogChart3.setOption(
          {
            title: [
              {
                x: '22%',
                y: '70%',
                textStyle: {
                  fontSize: 1,
                  fontWeight: '100',
                  lineHeight: 16,
                  textAlign: 'center'
                }
              }
            ],
            series: [
              {
                type: 'liquidFill',
                radius: '47%',
                center: ['25%', '45%'],
                color: [
                  {
                    type: 'linear',
                    x: 0,
                    y: 0,

                    colorStops: [
                      {
                        offset: 0,
                        color: '#e35d3e'
                      }
                    ]
                  }
                ],
                data: [this.backlog.unassignedTransportTaskRate / 100], // data个数代表波浪数
                backgroundStyle: {
                  color: '#ffe5e0' // 球内部背景颜色
                },
                outline: {
                  borderDistance: 5,
                  itemStyle: {
                    borderWidth: 1,
                    borderColor: '#ff9b41',
                    shadowBlur: 20
                  }
                },
                label: {
                  normal: {
                    textStyle: {
                      fontSize: 15,
                      color: 'black'
                    }
                  }
                }
              }
            ]
          }
        )
        // 第四个
        this.backlogChart4.setOption(
          {
            title: [
              {
                x: '22%',
                y: '70%',
                textStyle: {
                  fontSize: 1,
                  fontWeight: '100',
                  lineHeight: 16,
                  textAlign: 'center'
                }
              }
            ],
            series: [
              {
                type: 'liquidFill',
                radius: '47%',
                center: ['25%', '45%'],
                color: [
                  {
                    type: 'linear',
                    x: 0,
                    y: 0,

                    colorStops: [
                      {
                        offset: 0,
                        color: '#e35d3e'
                      }
                    ]
                  }
                ],
                data: [this.backlog.timeoutTransportTaskRate / 100], // data个数代表波浪数
                backgroundStyle: {
                  color: '#ffe5e0' // 球内部背景颜色
                },
                outline: {
                  borderDistance: 5,
                  itemStyle: {
                    borderWidth: 1,
                    borderColor: '#ff9b41',
                    shadowBlur: 20
                  }
                },
                label: {
                  normal: {
                    textStyle: {
                      fontSize: 15,
                      color: 'black'
                    }
                  }
                }
              }
            ]
          }
        )
        // 第五个
        this.backlogChart5.setOption(
          {
            title: [
              {
                x: '22%',
                y: '70%',
                textStyle: {
                  fontSize: 1,
                  fontWeight: '100',
                  lineHeight: 16,
                  textAlign: 'center'
                }
              }
            ],
            series: [
              {
                type: 'liquidFill',
                radius: '47%',
                center: ['25%', '45%'],
                color: [
                  {
                    type: 'linear',
                    x: 0,
                    y: 0,

                    colorStops: [
                      {
                        offset: 0,
                        color: '#e35d3e'
                      }
                    ]
                  }
                ],
                data: [this.todayData.taskInTransitRate / 100], // data个数代表波浪数
                backgroundStyle: {
                  color: '#ffe5e0' // 球内部背景颜色
                },
                outline: {
                  borderDistance: 5,
                  itemStyle: {
                    borderWidth: 1,
                    borderColor: '#ff9b41',
                    shadowBlur: 20
                  }
                },
                label: {
                  normal: {
                    textStyle: {
                      fontSize: 15,
                      color: 'black'
                    }
                  }
                }
              }
            ]
          }
        )
        // 第六个
        this.backlogChart6.setOption(
          {
            title: [
              {
                x: '22%',
                y: '70%',
                textStyle: {
                  fontSize: 1,
                  fontWeight: '100',
                  lineHeight: 16,
                  textAlign: 'center'
                }
              }
            ],
            series: [
              {
                type: 'liquidFill',
                radius: '47%',
                center: ['25%', '45%'],
                color: [
                  {
                    type: 'linear',
                    x: 0,
                    y: 0,

                    colorStops: [
                      {
                        offset: 0,
                        color: '#e35d3e'
                      }
                    ]
                  }
                ],
                data: [this.todayData.taskInDeliveryRate / 100], // data个数代表波浪数
                backgroundStyle: {
                  color: '#ffe5e0' // 球内部背景颜色
                },
                outline: {
                  borderDistance: 5,
                  itemStyle: {
                    borderWidth: 1,
                    borderColor: '#ff9b41',
                    shadowBlur: 20
                  }
                },
                label: {
                  normal: {
                    textStyle: {
                      fontSize: 15,
                      color: 'black'
                    }
                  }
                }
              }
            ]
          }
        )
        // 订单总量
        this.orderCharts1.setOption(
          {
            title: {
              text: '单位：笔'
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.gross.monthlyOrderList.map(item => item.dateTime)
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: this.gross.monthlyOrderList.map(item => item.orderNumber),
                type: 'line',
                symbol: 'circle',
                symbolSize: '8',
                areaStyle: {
                  color: '#fbeeeb'
                },
                lineStyle: {
                  color: '#ed9b87' // 线的颜色
                },
                itemStyle: {
                  color: '#e25433', // 设置圆点的颜色
                  borderWidth: 8,
                  emphasis: {
                  // 强调样式，设置为实心圆点
                    color: '#e25433',
                    borderWidth: 0
                  }
                }
              }
            ]
          }
        )
        // 订单分布
        this.orderCharts2.setOption(
          {
            title: {
              text: '单位：笔'
            },
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '3%',
              right: '1%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value'
            },
            yAxis: {
              type: 'category',
              data: ['广东', '山东', '江苏', '浙江', '河南', '四川', '湖北', '台湾', '福建', '湖南', '上海', '安徽', '河北', '北京', '陕西', '江西', '重庆', '辽宁', '云南', '广西', '香港', '山西', '内蒙古', '贵州', '新疆', '天津', '黑龙江', '吉林', '甘肃', '海南', '宁夏', '青海', '西藏', '澳门']
            },
            series: [
              {
                name: '2012',
                type: 'bar',
                data: [2500, 2400, 2200, 2100, 1900, 1700, 1600, 1400, 1300, 1200, 1050, 950, 800, 700, 600, 550, 450, 400, 390, 380, 370, 350, 320, 300, 280, 260, 240, 220, 200, 180, 160, 140, 120, 100],
                barWidth: '70%',
                itemStyle: {
                  color: '#e15536' // 设置条形图颜色为红色
                }
              }
            ]
          }
        )
        // 地图
        echarts.registerMap('china', china)
        this.map.setOption(
          {
            backgroundColor: '#fff',
            geo: {
              map: 'china',
              aspectScale: 0.75, // 长宽比
              zoom: 1.1,
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                      offset: 0,
                      color: '#ffe4b5' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#ff9739' // 100% 处的颜色
                    }],
                    globalCoord: true // 缺省为 false
                  },
                  shadowColor: 'rgb(58,115,192)'
                },
                emphasis: {
                  areaColor: '#2AB8FF',
                  borderWidth: 0,
                  color: 'green',
                  label: {
                    show: false
                  }
                }
              }
            },
            series: [{
              type: 'map',
              roam: false,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#1DE9B6'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: 'rgb(183,185,14)'
                  }
                }
              },

              itemStyle: {
                normal: {
                  borderColor: 'rgb(147, 235, 248)',
                  borderWidth: 1,
                  areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                      offset: 0,
                      color: '#09132c' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#274d68' // 100% 处的颜色
                    }],
                    globalCoord: true // 缺省为 false
                  }
                },
                emphasis: {
                  areaColor: 'rgb(46,229,206)',
                  borderWidth: 0.1
                }
              },
              zoom: 1.1,
              map: 'china' // 使用
            }, {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              showEffectOn: 'render',
              zlevel: 1,
              rippleEffect: {
                period: 15,
                scale: 4,
                brushType: 'fill'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  offset: [15, 0],
                  color: '#1DE9B6',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#1DE9B6',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              symbolSize: 12,
              data: [0]
            }, // 地图线的动画效果
            {
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 4, // 箭头指向速度，值越小速度越快
                trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', // 箭头图标
                symbolSize: 7 // 图标大小
              },
              lineStyle: {
                normal: {
                  color: '#1DE9B6',
                  width: 1, // 线条宽度
                  opacity: 0.1, // 尾迹线条透明度
                  curveness: 0.3 // 尾迹线条曲直度
                }
              },
              data: [
                { coords: [[118.8062, 31.9208], [119.4543, 25.9222]], lineStyle: { color: '#4ab2e5' }},
                { coords: [[127.9688, 45.368], [119.4543, 25.9222]], lineStyle: { color: '#4fb6d2' }},
                { coords: [[110.3467, 41.4899], [119.4543, 25.9222]], lineStyle: { color: '#52b9c7' }},
                { coords: [[125.8154, 44.2584], [119.4543, 25.9222]], lineStyle: { color: '#5abead' }},
                { coords: [[116.4551, 40.2539], [119.4543, 25.9222]], lineStyle: { color: '#f34e2b' }},
                { coords: [[123.1238, 42.1216], [119.4543, 25.9222]], lineStyle: { color: '#f56321' }},
                { coords: [[114.4995, 38.1006], [119.4543, 25.9222]], lineStyle: { color: '#f56f1c' }},
                { coords: [[117.4219, 39.4189], [119.4543, 25.9222]], lineStyle: { color: '#f58414' }},
                { coords: [[112.3352, 37.9413], [119.4543, 25.9222]], lineStyle: { color: '#f58f0e' }},
                { coords: [[109.1162, 34.2004], [119.4543, 25.9222]], lineStyle: { color: '#f5a305' }},
                { coords: [[103.5901, 36.3043], [119.4543, 25.9222]], lineStyle: { color: '#e7ab0b' }},
                { coords: [[106.3586, 38.1775], [119.4543, 25.9222]], lineStyle: { color: '#dfae10' }},
                { coords: [[101.4038, 36.8207], [119.4543, 25.9222]], lineStyle: { color: '#d5b314' }},
                { coords: [[103.9526, 30.7617], [119.4543, 25.9222]], lineStyle: { color: '#c1bb1f' }},
                { coords: [[108.384366, 30.439702], [119.4543, 25.9222]], lineStyle: { color: '#b9be23' }},
                { coords: [[113.0823, 28.2568], [119.4543, 25.9222]], lineStyle: { color: '#a6c62c' }},
                { coords: [[102.9199, 25.46639], [119.4543, 25.9222]], lineStyle: { color: '#96cc34' }}
              ]
            }
            ]
          }
        )
      }
    }
  },
  async created() {
  // 获取工作台的全部数据
    const res = await getWorkbench()
    this.organization = res.data.organOverview// 机构概述
    this.todayData = res.data.todayData// 今日数据
    this.backlog = res.data.backlog// 代办任务
    this.transportTaskList = res.data.transportTaskList// 运输任务
    this.gross = res.data.orderLineChart// 订单总量
  },
  mounted() {
    // 代办任务
    this.backlogChart1 = echarts.init(this.$refs.commission1)
    this.backlogChart2 = echarts.init(this.$refs.commission2)
    this.backlogChart3 = echarts.init(this.$refs.commission3)
    this.backlogChart4 = echarts.init(this.$refs.commission4)
    this.backlogChart5 = echarts.init(this.$refs.commission5)
    this.backlogChart6 = echarts.init(this.$refs.commission6)
    // 订单总量
    this.orderCharts1 = echarts.init(this.$refs.orderCharts1)
    this.orderCharts2 = echarts.init(this.$refs.orderCharts2)
    // 地图
    this.map = echarts.init(this.$refs.map)
    //

    // 实现table滚动
    // 拿到表格挂载后的真实DOM
    // const table = this.$refs.table
    // // 拿到表格中承载数据的div元素
    // const divData = table.bodyWrapper
    // // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    // setInterval(() => {
    //   // 元素自增距离顶部1像素
    //   divData.scrollTop += 1
    //   // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    //   if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
    //     // 重置table距离顶部距离
    //     divData.scrollTop = 0
    //   }
    // }, 300) // 滚动速度
  },
  methods: {
    // 查看营业部分布
    lookPicture() {
      this.isShow = true
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .bg-purple-dark {
    background: #fff;
    margin-top: 20px;
    padding:20px;

  }
.item{
 width: 161px;
 height: 100px;
 background-color: #fafafb;
 display: flex;
 flex-flow: column;
 align-items: center;

}

.list{
  display: flex;
  justify-content: space-around;
}
.flex{
    background: #fff;
    padding:20px;
    margin-top: 20px;
    height:190px;
}
.img{
  width: 50px;
  height: 50px;
  margin-top: 10px;
}
.line1{
width: 818px;
height: 514px;
 background: #fff;
 margin-top: 20px;
 padding: 20px;
}
.line2{
width: 818px;
height: 514px;
 background: #fff;
 margin-top: 20px;
 margin-left: 20px;
 padding: 20px;
}
::v-deep .el-dialog{
  width: 700px;
  height: 600px;
  background-image: url(https://slwl-admin.itheima.net/static/img/department_map.7a0c7499.png);
  background-size: 100%;
}
::v-deep .el-dialog__close{
  margin: 20px;
}
</style>
